<template>
  <canvas ref="canvas" class="particles-canvas"></canvas>
</template>

<script>
export default {
  name: 'ParticlesBackground',
  props: {
    isDarkMode: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      canvas: null,
      ctx: null,
      particles: [],
      mouse: { x: null, y: null, radius: 120 },
      animationFrame: null
    }
  },
  mounted() {
    this.initCanvas()
    this.createParticles()
    this.animate()
    
    window.addEventListener('resize', this.handleResize)
    window.addEventListener('mousemove', this.handleMouseMove)
  },
  beforeUnmount() {
    if (this.animationFrame) {
      cancelAnimationFrame(this.animationFrame)
    }
    window.removeEventListener('resize', this.handleResize)
    window.removeEventListener('mousemove', this.handleMouseMove)
  },
  watch: {
    isDarkMode() {
      // 主题切换时重新绘制
      this.particles.forEach(particle => {
        particle.updateColor(this.getParticleColor())
      })
    }
  },
  methods: {
    initCanvas() {
      this.canvas = this.$refs.canvas
      this.ctx = this.canvas.getContext('2d')
      this.canvas.width = window.innerWidth
      this.canvas.height = window.innerHeight
    },
    
    getParticleColor() {
      // 根据主题返回粒子颜色
      return this.isDarkMode 
        ? 'rgba(66, 184, 131, 0.5)'  // 暗色模式：绿色半透明
        : 'rgba(66, 184, 131, 0.6)'  // 亮色模式：增加不透明度，更明显
    },
    
    createParticles() {
      const numberOfParticles = Math.floor((this.canvas.width * this.canvas.height) / 15000)
      
      for (let i = 0; i < numberOfParticles; i++) {
        const size = Math.random() * 3 + 1
        const x = Math.random() * this.canvas.width
        const y = Math.random() * this.canvas.height
        const speedX = (Math.random() - 0.5) * 2  // 增加速度
        const speedY = (Math.random() - 0.5) * 2  // 增加速度
        
        this.particles.push(new Particle(x, y, speedX, speedY, size, this.getParticleColor()))
      }
    },
    
    handleResize() {
      this.canvas.width = window.innerWidth
      this.canvas.height = window.innerHeight
      this.particles = []
      this.createParticles()
    },
    
    handleMouseMove(event) {
      this.mouse.x = event.x
      this.mouse.y = event.y
    },
    
    animate() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
      
      // 绘制粒子
      this.particles.forEach(particle => {
        particle.update(this.canvas, this.mouse)
        particle.draw(this.ctx)
      })
      
      // 连接粒子
      this.connectParticles()
      
      this.animationFrame = requestAnimationFrame(() => this.animate())
    },
    
    connectParticles() {
      const maxDistance = 120
      
      for (let i = 0; i < this.particles.length; i++) {
        for (let j = i + 1; j < this.particles.length; j++) {
          const dx = this.particles[i].x - this.particles[j].x
          const dy = this.particles[i].y - this.particles[j].y
          const distance = Math.sqrt(dx * dx + dy * dy)
          
          if (distance < maxDistance) {
            const opacity = (1 - distance / maxDistance) * 0.3
            const color = this.isDarkMode 
              ? `rgba(66, 184, 131, ${opacity})` 
              : `rgba(66, 184, 131, ${opacity * 0.9})`  // 亮色模式连线更明显
            
            this.ctx.strokeStyle = color
            this.ctx.lineWidth = 1
            this.ctx.beginPath()
            this.ctx.moveTo(this.particles[i].x, this.particles[i].y)
            this.ctx.lineTo(this.particles[j].x, this.particles[j].y)
            this.ctx.stroke()
          }
        }
      }
    }
  }
}

// 粒子类
class Particle {
  constructor(x, y, speedX, speedY, size, color) {
    this.x = x
    this.y = y
    this.speedX = speedX
    this.speedY = speedY
    this.size = size
    this.color = color
  }
  
  updateColor(color) {
    this.color = color
  }
  
  draw(ctx) {
    ctx.fillStyle = this.color
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
    ctx.fill()
  }
  
  update(canvas, mouse) {
    // 鼠标交互
    if (mouse.x && mouse.y) {
      const dx = mouse.x - this.x
      const dy = mouse.y - this.y
      const distance = Math.sqrt(dx * dx + dy * dy)
      
      if (distance < mouse.radius) {
        const forceX = dx / distance
        const forceY = dy / distance
        const force = (mouse.radius - distance) / mouse.radius
        const directionX = forceX * force * 3
        const directionY = forceY * force * 3
        
        this.x -= directionX
        this.y -= directionY
      }
    }
    
    // 移动粒子
    this.x += this.speedX
    this.y += this.speedY
    
    // 边界检测和反弹
    if (this.x + this.size > canvas.width || this.x - this.size < 0) {
      this.speedX = -this.speedX
      this.x = this.x + this.size > canvas.width ? canvas.width - this.size : this.size
    }
    if (this.y + this.size > canvas.height || this.y - this.size < 0) {
      this.speedY = -this.speedY
      this.y = this.y + this.size > canvas.height ? canvas.height - this.size : this.size
    }
  }
}
</script>

<style scoped>
.particles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
</style>

